<!-- 审批列表 -->
<template>
  <div class="page-main">
    <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable" :exportBtn="true"
            @exportHandler="exportHandler" >
      <el-form-item label="公司名称">
        <el-input v-model="formInline.company" placeholder="请输入公司名称"></el-input>
      </el-form-item>
      <el-form-item label="运单ID">
        <el-input v-model="formInline.yund_id" placeholder="请输入运单ID"></el-input>
      </el-form-item>

      <!-- <el-form-item label="公司名称">
          <el-input v-model="formInline.company_name" placeholder="请输入公司名称"></el-input>
      </el-form-item>-->
      <el-form-item label="审批状态">
        <el-select v-model="formInline.status" @change="changeStatusSelect" placeholder="选择审批状态">
          <el-option :value="0" label="全部"></el-option>
          <el-option :value="1" label="开单人已审批"></el-option>
          <el-option :value="2" label="追踪人员已审批"></el-option>
          <el-option :value="3" label="平台部已审批"></el-option>
          <el-option :value="4" label="财务部已审批"></el-option>
          <el-option :value="5" label="董事长已审批"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
          v-model="pickerDateArr"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="(data) => changeDatePicker(data, 'goods')"
        ></el-date-picker>
      </el-form-item>
    </CustomForm>
    <div class="tool" style="margin-bottom: 10px;">
      <el-button type="success" @click="beforeBatch">微信批量发起</el-button>
    </div>

    <CustomDescriptions :data="descriptionsData" :styleBox="{ width: '100%' }"></CustomDescriptions>

    <el-table :data="list" style="width: 100%" height="600" v-loading="tableloading"
    @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :selectable="selectableStatus">
            </el-table-column>
      <el-table-column
        prop="add_id"
        label="运单ID"
        width="110"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.add_id + '-' + scope.row.yund_id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="company"
        label="公司名称"
        align="center"
        width="300"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="driver_name" label="司机姓名" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
            {{ $maskString(scope.row.driver_name) }}
        </template> 
      </el-table-column>
      <el-table-column prop="cph" label="车牌号" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="goods" label="货物名称" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="shkg" label="收货重量" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="money_bill" label="含税金额" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="money" label="实结金额" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="add_time" label="发起审批时间" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="name" label="审批状态" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope"> 
          <span :style="{color:statusMap[scope.row.status].color}" >{{ statusMap[scope.row.status].name }}已审批</span>
          
           </template>
      </el-table-column>
      <el-table-column prop="name" label="支付状态" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope"> 
        
          <span v-if="scope.row.pay_status == 0" style="color: #F56C6C;">未支付</span>
          <span v-if="scope.row.pay_status == 1" style="color: #67C23A;">已支付</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openOrderTemp(scope.row)">审批流程</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="formInline.page"
      :page-sizes="$pageSizeList"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <el-dialog title="审批流程" class="carTrace" top="5vh" :visible.sync="templateDialog" width="80%">
      <orderTemplate v-if="templateDialog" :row="templateRow" @close="templateDialog = false" />
    </el-dialog>

    <el-dialog title="发起批量审批" class="carTrace" top="20vh" :visible.sync="batchDialog" width="50%">
      <batchSubmit v-if="batchDialog" :rows="multipleSelection" @close="batchDialog = false" @refresh="initial" />
    </el-dialog>
  </div>
</template>
  
  <script>
import { getApproveBillList, freightTemplateDetail } from "@/api/businessUser/waybill";
import { getToken, getUserId } from '@/utils/auth';
import orderTemplate from "../../waybillManagement/components/orderTemplate";
import batchSubmit from "../components/batchSubmit.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    orderTemplate,
    batchSubmit
  },
  data() {
    //这里存放数据
    return {
      formInline: {
        company: "", //公司名称
        yund_id: "", //分运单id
        status: "", //0全部1开单人审批2追踪人员审批3平台部审批4财务部审批5董事长审批
        add_time: "", //申请时间 2023-04-06 - 2023-06-08
        page: 1,
        pageSize: 10
      },
      templateRow: {},
      templateDialog: false,
      list: [],
      tableloading: false,
      pickerDateArr: "",
      total: 0,
      statusMap: {
        "1": {
          name:"开单人",
          color:'#409EFF',
        },
        "2": {
          name:"追踪人员",
          color:'#E6A23C',
        },
        "3": {
          name:"平台部",
          color:'#F56C6C',
        },
        "4": {
          name:"财务部",
          color:'#4AB7BD',
        },
        "5": {
          name:"董事长",
          color:'#67C23A',
        }
      },
      descriptionsData: [
        {
          label: "实结金额",
          count: 0,
          unit: "(元)"
        },
        {
          label: "含税金额",
          count: 0,
          unit: "(元)"
        },
      ],
      batchDialog:false,
      multipleSelection: [],//el-table select选中的数据
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async initial() {
      this.batchDialog = false;
      let res = await getApproveBillList(this.formInline);
      if (res.code == 200) {
        this.list = res.data.data;
        this.list = res.data ? res.data.data : [];
        this.total = res.data ? res.data.total : 0;
        this.descriptionsData[1].count = res.extra.money_bill;
        this.descriptionsData[0].count = res.extra.money;
        // this.descriptionsData[2].count = res.data.list.total;
      }
    },
    selectableStatus(row, index) {
          if(row.status == 1){
              return true
          }else{
              return false
          }
      },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    beforeBatch(){  
      //判断是否有选中数据
      if(this.multipleSelection.length == 0){
        this.$message.error('请选择要发起审批的数据!');
        return;
      }
      //判断是否都是一个公司的
      let companyList = [...new Set(this.multipleSelection.map(item => item.company))];
      if(companyList.length > 1){
        this.$message.error('存在不同的公司!');
        return;
      }
      //显示批量审批确认框
      this.batchDialog = true;
    },

    async openOrderTemp(row) {
      let result = await freightTemplateDetail({ id: row.yund_id });
      console.log("result", result);
      if (result.code == 200) {
        this.templateRow = {
          ...result.data,
          orderInfo: {
            ...row,
            id:row.yund_id,
            apply_bill_status:1
          }
        };
        this.templateDialog = true;
      }
    },
    changeDatePicker(data) {
      console.log("data", data);
      if(data){
        this.formInline.add_time = data.join(" - ");
      }
    },
    check() {},
    onSubmit() {
      this.formInline.page = 1;
      this.initial();
    },
    resetTable() {
      this.formInline = {
        driver_name: "",
        status: -1,
        time: "",
        company_name: ""
      };
      this.pickerDateArr = "";
      this.initial();
    },
    handleSizeChange(pageSzie) {
      this.formInline.pageSize = pageSzie;
      this.formInline.page = 1;
      this.initial();
    },
    handleCurrentChange(page) {
      this.formInline.page = page;
      this.initial();
    },
    changeStatusSelect() {
      this.initial();
    },
    exportHandler() {//导出数据
      //出审核 状态 所属地区这些默认数据外 用户必须操作输入别的筛选项才可以进行条件导出
      let keyList = ['page','pageSize'];
      let exportAble = false;
      Object.keys(this.formInline).forEach(item => {
          if (!keyList.includes(item)) {
              if(this.formInline[item]){
                  //其余项存在值
                  exportAble = true;
              }
          }
      })
      if(!exportAble) {
          this.$message.error('请输入任意条件 ！');
          return;
      };
      // console.log(`https://api.zhgylgl.com/api/admin/exportData?status=${this.formInline.status}&xiugai=${this.formInline.xiugai}&time=${this.formInline.time}&company_name=${this.formInline.company_name}&token=${getToken()}&userId=${getUserId()}`);
      window.open(`
      https://api.zhgylgl.com/api/admin/exportApproveBillList?
      company=${this.formInline.company}&
      yund_id=${this.formInline.yund_id}&
      status=${this.formInline.status}&
      add_time=${this.formInline.add_time}&
      token=${getToken()}&
      userId=${getUserId()}
      `, '_blank', '');
      },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted(option) {
    // if (this.$route.query.yund_id) {
    //   this.formInline.bill_id = this.$route.query.yund_id;
    // }
    this.initial();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
  <style lang='scss' scoped>
//@import url(); 引入公共css类

::v-deep .el-table {
  //   margin-top: 60px;
}

::v-deep .el-pagination {
  margin-top: 20px;
}
</style>